<template>
  <div class="home">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="部门名称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入部门名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-card>
      <div>
        <el-button type="success" size="small" @click="openunitDialog"
          >新增部门</el-button
        >
        <el-button type="primary" size="small" @click="refresh">刷新</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" class="elTable">
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="companyCode" label="单位编号" align="center" />
        <el-table-column prop="companyName" label="单位名称" align="center" />
        <el-table-column prop="deptCode" label="部门编号" align="center" />
        <el-table-column prop="deptName" label="部门名称" align="center" />
        <el-table-column label="管理" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="info" size="small" @click="openUser(scope.row)"
              >人员</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="info" size="small" @click="editUnit(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="small" @click="delunit(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="pageIndex"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :modal="false"
    >
      <el-form ref="form" :model="departmentDate" :rules="rules">
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="departmentDate.deptName" />
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addunit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="人员管理"
      :visible.sync="inlineShow"
      width="90%"
      :modal="false"
    >
      <user v-if="inlineShow" :dept="unitInfo" :info="info" />
    </el-dialog>
  </div>
</template>

<script>
import {
  queryDeptPage,
  insertDept,
  updateDept,
  deleteDept
} from "@/api/department/index"
import user from "@/components/Unit/user"

export default {
  components: {
    user
  },
  props: {
    dept: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      tableData: [],
      dialogVisible: false,
      total: 0,
      departmentDate: {},
      dialogTitle: "",
      queryParams: {
        deptName: ""
      },
      unitInfo: {},
      rules: {
        deptName: [
          { required: true, message: "请输入单位名称", trigger: "blur" }
        ]
      },
      info: {},
      inlineShow: false
    }
  },
  created() {
    this.getList()
    this.unitInfo = this.dept
  },
  mounted() {},
  methods: {
    openUser(val) {
      this.info = val

      this.inlineShow = true
    },
    refresh() {
      this.$refs.queryForm.resetFields()
      this.pageIndex = 1
      this.getList()
    },
    async getList() {
      const { object } = await queryDeptPage({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        companyCode: this.dept.companyCode,
        deptName: this.queryParams.companyName
      })
      this.tableData = object.data
      this.total = object.count
    },

    async openunitDialog() {
      this.dialogTitle = "新增部门"
      this.departmentDate = {}
      this.departmentDate.companyCode = this.dept.companyCode
      this.departmentDate.companyName = this.dept.companyName

      this.dialogVisible = true
    },
    editUnit(val) {
      this.dialogTitle = "修改部门"
      this.departmentDate = JSON.parse(JSON.stringify(val))
      this.dialogVisible = true
    },

    delunit(val) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await deleteDept({ id: val.id })
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "删除成功!"
            })
            this.getList()
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    addunit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.departmentDate.id) {
            const res = await insertDept(this.departmentDate)
            if (res.code === "200") {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: "success",
                message: res.message
              })
            }
          } else {
            const res = await updateDept({
              id: this.departmentDate.id,
              deptName: this.departmentDate.deptName
            })
            if (res.code === "200") {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: "success",
                message: res.message
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
